<template>
  <ul class="book-sort">
    <li class="compsive">综合</li>
    <li
      :class="{ selected: sortField === 'monthsalecount' }"
      @click="sortBook('monthsalecount')"
    >
      销量
    </li>
    <li :class="{ selected: sortField === 'originalprice' }" @click="sortBook('originalprice')">
      价格
      <span class="ascdesc">
        <i
          v-show="isReadyAsc"
          class="iconfont icon-zuoce-xiangshangxiaojiantou"
        ></i>
        <i
          v-show="!isReadyAsc"
          class="iconfont icon-zuoce-xiangxiaxiaojiantousvg"
        ></i>
      </span>
    </li>
    <li class="shop">店铺</li>
    <li class="dressing">
      筛选
      <i class="iconfont icon-shaixuan"></i>
    </li>
  </ul>
</template>

<script setup lang="ts">
import book from "../service"

const { sortBook, isReadyAsc, sortField } = book
</script>

<style lang="scss" scoped>
.book-sort {
  display: flex;
  align-items: center;
  font-size: 0.2rem;
  height: 0.5rem;
  margin-top: 0.2rem;
  > li {
    flex-grow: 1;
    text-align: center;
    &.selected {
      color: red;
    }
  }
}
</style>
